<template>
	<view>
		<view class="wrap" ref="backTop">
			<uv-back-top :scroll-top="scrollTop"></uv-back-top>
		</view>
		<!-- <view class="uvIcon" @click=backTop>
			<uv-icon name="arrow-up"></uv-icon>
		</view> -->
		<view class="gradeBox">
			<text>健康指数</text>
			<text style="font-size: 60rpx;">87</text>
			<button @click="look">查看全部项目</button>
			<text>您的健康指数为87分，比80%的人更健康</text>
		</view>
		<view class="historyBox">
			<view class="normal">
				<view class="normalName" style="margin-top: 20rpx;">
					历史比对
				</view>
				<view class="first" @click="pathBtn(i)" v-for="(item,i) in displayedItems" :key="item.id"
					:class="{hidden:i >= !showAll}">
					<view class="left">
						{{item.name}}
					</view>
					<view class="right">
						<text>{{item.value}}</text>
						<view class="center">{{item.icon}}</view>
					</view>
				</view>
				<view class="more-collapse" @click="listLength">{{showAll?'收起':'查看更多'}}</view>
			</view>
		</view>
		<view class="historyBox">
			<view class="normal">
				<view class="normalName">
					异常指标
				</view>
				<view class="first" @click="clickPath">
					<view class="left">
						血小板
					</view>
					<view class="right">
						<text style="color: red;">103.00*10^9/L</text>
						<view class="center">></view>
					</view>
				</view>
			</view>
		</view>
		<view class="historyBox">
			<view class="normal">
				<view class="normalName">
					综述
				</view>
				<view style="background-color: #fff;">
					<view class="report-tit">
						终检结论
					</view>
					<view class="report-cont">
						1.血液常规提示：血小板值偏低[103.00*10^9/L]。建议内科复查随访
					</view>
					<view class="report-tit">
						医疗保健
					</view>
					<view class="report-cont">
						1.血小板减少：
						血小板是血液基本成分之一，参与止血和血栓形成，血小板计数是每单位容积周围血液中血小板的数量，低于100*10（9次方）/L为血小板计数减少。清晨、女性月经前可呈一过性减少，一般无临床意义。病理性减少见于原发性血小板减少性紫癜、再生障碍性贫血、放射性损伤、某些药物反应、脾功能亢进等。
						<br>
						建议您复查血常规、内科随访。
					</view>
				</view>
			</view>
		</view>
		<button style="background-color: #fff;color: #8FCDB2;" @click="chat">咨询医生</button>
	</view>


</template>

<script setup lang="ts">
	import { ref, computed } from "vue";
	import { onPageScroll } from '@dcloudio/uni-app'
	let scrollTop = ref(0)
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
		// console.log("滚动距离为：" + e.scrollTop);
	})
	// const scrollToTop = () => {
	// 	uni.pageScrollTo({
	// 		scrollTop: 0, // 滚动到顶部
	// 		duration: 300 // 动画过渡时间，单位为毫秒
	// 	});
	// }
	// const onPageScroll = (e : UniApp.PageScrollOption) : void => {
	// 	console.log(e);
	// 	// scrollTop.value = e.scrollTop;
	// 	// scrollTop.value = e.detail.scrollTop;
	// };
	// onMounted(() => {
	// 	window.addEventListener('scroll', onPageScroll);
	// });
	// const backTop = () => {
	// 	scrollToTop()
	// 	console.log('返回顶部');
	// }
	const showAll = ref(false)
	const chat = () => {
		uni.navigateTo({
			url: "/page_report/report_chat/report_chat"
		})
	}
	const look = () => {
		uni.navigateTo({
			url: "/page_report/report_allexamin/report_allexamin"
		})
	}
	const clickPath = () => {
		uni.navigateTo({
			url: "/page_report/report_examin/report_exmain"
		})
	}
	//历史对比
	interface history {
		id : number,
		name : string,
		value : string,
		icon : string,
	}
	const typeArr : history[] = [
		{ id: 0, name: '白细胞', value: '45.00*10^9/L', icon: '>' },
		{ id: 1, name: '红细胞', value: '78mmHg', icon: '>' },
		{ id: 2, name: '收缩压', value: '96mmHg', icon: '>' },
		{ id: 3, name: '舒张压', value: '66mmHg', icon: '>' },
		{ id: 4, name: '血小板', value: '99.00*10^9/L', icon: '>' }
	]
	const pathBtn = (i) => {
		//console.log(typeArr[i].name);
		switch (typeArr[i].name) {
			case '白细胞':
				uni.navigateTo({
					url: "/page_report/report_examin/report_exmain"
				});
				break;
			case '红细胞':
				uni.navigateTo({
					url: "/page_report/report_examin/report_exmain"
				});
				break;
			case '收缩压':
				uni.navigateTo({
					url: "/page_report/report_history/report_history"
				});
				break;
			case '舒张压':
				uni.navigateTo({
					url: "/page_report/report_history/report_history"
				});
				break;
			case '血小板':
				uni.navigateTo({
					url: "/page_report/report_history2/report_history2"
				});
				break;
		}
	}
	const listLength = () => {
		showAll.value = !showAll.value;
		if (!showAll.value) {
			console.log('展示3条数据');
		}

	}
	const displayedItems = computed(() => {
		if (showAll.value) {
			return typeArr;
		} else {
			return typeArr.slice(0, 3);
		}
	});
</script>

<style lang="scss">
	.uvIcon {
		background-color: rgba(128, 128, 128, 0.5);
		width: 60rpx;
		height: 60rpx;
		position: fixed;
		right: 10rpx;
		bottom: 100rpx;
		border-radius: 50%;

		.uv-icon {
			padding-left: 15rpx;
			padding-top: 10rpx;
		}
	}



	.hidden {
		display: none;
	}

	// .status_bar {
	// 	height: var(--status-bar-height);
	// 	width: 100%;
	// }

	.gradeBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F4F6F6;
		padding: 40rpx 0;

		button {
			background-color: #fff;
			border: 4rpx solid #8FCDB2;
			color: #8FCDB2;
			outline: none;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			width: 280rpx;
			margin: 20rpx 0;
		}

		button::after {
			border: none;
		}

	}

	.historyBox {
		// margin-top: 20rpx;
		background-color: #F4F6F6;

		.normalName {
			width: 100%;
			line-height: 112rpx;
			font-weight: blod;
			font-size: 32rpx;
			margin-left: 30rpx;
			height: 112rpx;
		}

		.normal {
			width: 100%;

			.report-tit {
				font-size: 40rpx;
				font-weight: 600;
				padding: 30rpx 0 20rpx 20rpx;
			}

			.report-cont {
				padding: 20rpx 20rpx 40rpx 20rpx;
			}

			.center {
				color: #aaa;
				font-weight: 500;
				font-size: 35rpx;
				margin-left: 10rpx;
			}
		}

		.first {
			width: 100%;
			height: 88rpx;
			border-bottom: 0.1rpx solid #ccd8db;
			background-color: white;
			line-height: 88rpx;
			display: flex;
			justify-content: space-between;

			.left {

				margin-left: 30rpx;
			}

			.right {
				font-size: 28rpx;
				color: #969FA2;
				margin-right: 30rpx;
				display: flex;
				justify-content: right;
			}
		}

	}

	.more-collapse {
		width: 100%;
		height: 88rpx;
		border-bottom: 0.1rpx solid #ccd8db;
		background-color: white;
		line-height: 88rpx;
		color: #59B58D;
		text-align: center;
	}
</style>